<template>
  <d2-container class="page">
    <div style="position: relative;">
      <h4 class="my_header">导入导出记录</h4>
<!--      <el-upload-->
<!--        class="upload-demo"-->
<!--        action="/"-->
<!--        :show-file-list="false"-->
<!--        :on-preview="handlePreview"-->
<!--        :on-remove="handleRemove"-->
<!--        :before-remove="beforeRemove"-->
<!--        multiple-->
<!--        :limit="3"-->
<!--        :on-exceed="handleExceed"-->
<!--        :file-list="fileList">-->
<!--        <el-button size="mini" type="primary" style="position: absolute;right: 0;top: 0;">数据导入</el-button>-->
<!--      </el-upload>-->
<!--      <el-button type="primary" size="mini"  >数据导入</el-button>-->
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      height="600"
      :row-class-name="tableRowClassName">
      <el-table-column
        align="center"
        prop="name"
        label="名称"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="operTime"
        label="数据时间"
        width="280">
      </el-table-column>
      <el-table-column
        align="center"
        prop="dataSize"
        width="120"
        label="大小（kb）">
      </el-table-column>
      <el-table-column
        align="center"
        prop="operType"
        width="160"
        label="数据类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="operName"
        width="120"
        label="交互形式">
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            @click="handleSee(scope.$index, scope.row)">查看</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            @click="handleEdit(scope.$index, scope.row)">导出</el-button>-->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </d2-container>
</template>

<script>
import { delInteraction, getDataInteraction } from '@api/data.interaction'

export default {
  name: 'dataIndex',
  data () {
    return {
      fileList: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: []
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 3 === 1) {
        return 'warning-row'
      } else if (rowIndex % 3 === 3) {
        return 'success-row'
      }
      return ''
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getList()
    },
    handleEdit () {

    },
    handleDelete (id) {
      // 删除记录信息
      this.$confirm('确认删除？', '删除交互记录', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          delInteraction(id).then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    handleSee (index, row) {
      console.log(index)
      window.location.href = '/'
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    getList () {
      // 查询数据交互记录
      let query = {
        'num': this.currentPage,
        'size': this.pageSize
      }
      getDataInteraction(query).then(res => {
        this.total = res.count
        this.tableData = res.list
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>
  .my_header{
    font-size: 22px;
    height: 40px;
    line-height: 40px;
    margin: 0px;
    border-bottom: 1px solid #ff5500;
  }
  .page .el-table tr.warning-row {
    background: oldlace !important;
  }

  .page .el-table tr.success-row {
    background: #f0f9eb;
  }

  .el-pagination {
    text-align: center;
    background: floralwhite;
  }
</style>
